<template>
	<view class="delay-container">
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC' : ''" title="待审批">
				<view class="bg100" v-if="nostartList.length">
					<delay-list @detail="goDelayDetail"  :ticketList="nostartList"></delay-list>
				</view>
				
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC' : ''" title="已审批">
				<!-- <view class="bg100" v-if="completeList.length">
					<delay-list @detail="goDelayDetail" desc="去查看"  :ticketList="completeList"></delay-list>
				</view> -->
				<view class="bg100" v-if="completeList.length">
					<delay-list @detail="goDelayDetail"  :ticketList="completeList"></delay-list>
				</view>
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import DelayList from '../Components/delayList.vue'
	export default {
		components: {
			DelayList
		},
		data() {
			return {
				ticketType: this.$type.ticketType,
				active: 0,
				delayList: [],
				nostartList: [],
				completeList: [],
				params: {
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 0
					}
				}
			}
		},
		onLoad() {
			this.getDelayList()
		},
		methods: {
			goDelayDetail(id) {
				uni.navigateTo({
					url: '/ticketSystem/delayDetail/delayDetail?id=' + id
				})
			},
			changeTab(name, title) {
				this.active = name.target.index
			},
			getDelayList() {
				uni.showLoading({
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/list', this.params).then(res => {
					if(res.code === 10000) {
						console.log(res)
						res.data.list = res.data.list || []
						this.nostartList = res.data.list.filter(item => item.延期申请状态 === 1)
						this.completeList = res.data.list.filter(item => [2,3].includes(item.延期申请状态))
						console.log(this.completeList)
						console.log(this.nostartList)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.bg100 {
	background-color: #f5f5f5;
	min-height: 100vh;
}
.delay-container {
	background-color: #f5f5f5;
	// min-height: 100vh;
}
.record-item {
		width: 690rpx;
		height: 282rpx;
		background-color: #fff;
		box-shadow: 0px 1rpx 11rpx 1rpx #EEEEEE;
		border-radius: 8rpx;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		margin-left: 30rpx;

		.item-title {
			display: flex;
			justify-content: space-between;
			padding-right: 20rpx;
			width: 100%;
			height: 71rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			position: relative;

			// padding-top: 10rpx;
			.left-border {
				width: 6rpx;
				height: 30rpx;
				background-color: #1064E9;
				position: absolute;
				left: 0;
				top: 20rpx;
			}

			.left {
				padding-left: 30rpx;
				color: #333;
				font-weight: bold;
				// margin-right: 230rpx;
			}

			.right {
				color: #333;
				font-size: 28rpx;
			}

			.compete {
				color: #83D065;
				width: 82rpx;
				height: 36rpx;
				font-size: 22rpx;
				border: 2rpx solid #83D065;
				text-align: center;
			}
		}

		.item-content {
			color: #666;
			padding: 20rpx 30rpx;
			font-size: 28rpx;
			position: relative;

			.content-top {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: space-between;

				.handle {
					width: 82rpx;
					height: 36rpx;
					background: #1152FC;
					color: #fff;
					font-size: 22rpx;
					text-align: center;

				}
			}

			.content-center {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.transfer {
					width: 82rpx;
					height: 36rpx;
					// background: #1152FC;
					color: #1152FC;
					font-size: 22rpx;
					border: 2rpx solid #1152FC;
					text-align: center;
				}
			}

			.content-bottom {
				display: flex;
				justify-content: space-between;

				.transfer {
					width: 82rpx;
					height: 36rpx;
					// background: #1152FC;
					color: #1152FC;
					font-size: 22rpx;
					border: 2rpx solid #1152FC;
					text-align: center;
				}

				.type {
					width: 20em;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.cancel {
				position: absolute;
				right: 30rpx;
				bottom: 10rpx;
				text-align: center;
				line-height: 35rpx;
				width: 80rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #E57544;
				border: 2rpx solid #E57544;
			}
		}
	}
	.ticket-status {
		width: 82rpx;
		height: 36rpx;
		font-size: 22rpx;
		text-align: center;
	}
	.paifa {
		color: #7D77EF;
		border: 2rpx solid #7D77EF;
	}
	.daichuli {
		color: #FFB93F;
		border: 2rpx solid #FFB93F;
	}
	.abandon {
		color: #FF8686;
		border: 2rpx solid #FF8686;
	}
	
	.handle {
		color: #1152FC!important;
		border: 2rpx solid #1152FC;
		background-color: #fff!important;
	}
	
	.complete {
		color: #83D065;
		border: 2rpx solid #83D065;
	}
</style>
